<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>svg</title>
  <link rel="stylesheet" href="./../css/index.css">
  <style>
    circle {
      fill: #f00;
    }
  </style>
  <script src="./../js/vendor/commonjs-simulator.min.js"></script>
</head>
<body>
<h1>渐变--径向渐变</h1>
<div class="layout-wrapper">
  <div class="layout-item">
    <svg id='gradient01'>
      <defs id="defs">

      </defs>

      <g transform="translate(150,0)" id="group01"></g>
    </svg>
  </div>
  <div class="layout-item">
    <svg width="250" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <radialGradient id="GradientPad"
                        cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
                        spreadMethod="pad">
          <stop offset="0%" stop-color="red"></stop>
          <stop offset="100%" stop-color="blue"></stop>
        </radialGradient>
        <radialGradient id="GradientRepeat"
                        cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
                        spreadMethod="repeat">
          <stop offset="0%" stop-color="red"></stop>
          <stop offset="100%" stop-color="blue"></stop>
        </radialGradient>
        <radialGradient id="GradientReflect"
                        cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
                        spreadMethod="reflect">
          <stop offset="0%" stop-color="red"></stop>
          <stop offset="100%" stop-color="blue"></stop>
        </radialGradient>
      </defs>

      <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#GradientPad)"></rect>
      <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientRepeat)"></rect>
      <rect x="120" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientReflect)"></rect>

      <text x="15" y="30" fill="white" font-family="sans-serif" font-size="12pt">Pad</text>
      <text x="15" y="140" fill="white" font-family="sans-serif" font-size="12pt">Repeat</text>
      <text x="125" y="140" fill="white" font-family="sans-serif" font-size="12pt">Reflect</text>

    </svg>
  </div>
</div>
</body>
</html>
<script type="module">
  import {initD3Root} from "../js";

  const width = 400;
  const height = 300;

  const gradientId = () => {
    const id = Math.round(Math.random() * 0xFFFFFF).toString(16);
    return 'gradient-' + id;
  };

  {
    const svg = initD3Root({
      selector: '#gradient01',
      width, height
    });

    const id = gradientId();

    const defs = svg.select('#defs');

    const radialGradient = defs.append('radialGradient')
      .attr('id', id)
      .attr('cx', 0.5)
      .attr('cy', 0.5)
      .attr('r', 0.5)
      .attr('fx', 0.5)
      .attr('fy', 0.5)
      .attr('fr', 0);

    radialGradient.append('stop')
      .attr('stop-color', '#f00')
      .attr('stop-opacity', 1)
      .attr('offset', 0);

    radialGradient.append('stop')
      .attr('stop-color', '#0f0')
      .attr('stop-opacity', 1)
      .attr('offset', 0.5);

    radialGradient.append('stop')
      .attr('stop-color', '#00f')
      .attr('stop-opacity', 1)
      .attr('offset', 1);

    const group = svg.select('#group01');
    group.append('rect')
      .attr('x', 0)
      .attr('y', 30)
      .attr('rx', 5)
      .attr('ry', 5)
      .attr('width', 200)
      .attr('height', 200)
      .attr('fill', id ? `url(#${id})` : '#000');

  }

</script>